<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#min{width: 350px;height: 350px;background: url(img/min.jpg);position: relative;overflow: hidden;border: 5px solid black;}
		#fd{width: 175px;height: 175px;background-color: yellow;position: absolute;opacity: 0.6;}
		#max{width: 350px;height: 420px;overflow: hidden;position: relative;border: 5px solid black;}
		#max img{position: absolute;}
	</style>
</head>
<body>
	<div id="min">
		<div id="fd"></div>
	</div>
	<div id="max"><img src="img/max.jpg"></div>
</body>
<script type="text/javascript">
var fd=document.getElementById("fd");
var min=document.getElementById("min");
var max=document.getElementById("max");
var img=max.getElementsByTagName("img")[0];
min.onmousemove = function(ev){
	if (min.offsetWidth-fd.offsetWidth>=0) {
		fd.style.top=ev.clientY + "px";
		fd.style.left=ev.clientX + "px";
		fd.style.marginLeft=-1*(fd.offsetWidth/2)+"px";
		fd.style.marginTop=-1*(fd.offsetHeight/2)+"px";
	}
	img.style.top=-2*ev.clientY + 175 + "px";
	img.style.left=-2*ev.clientX +87.5  + "px";
}
</script>
</html>